<template>
  <div class="sell-page">
    <c-title :hide="false" text="售卖明细"></c-title>
    <div class="flex-a-c search-sell">
      <div class="search-sn">
        <van-search v-model="ordersn" placeholder="订单编号" custom-class="search-padding" use-left-icon-slot>
          <div slot="left-icon"></div>
        </van-search>
      </div>
      <div class="search-name">
        <van-search v-model="couponMemberKwd" placeholder="姓名/手机号" custom-class="search-padding" use-left-icon-slot>
          <div slot="left-icon"></div>
        </van-search>
      </div>
      <div class="search-btn flex-a-c flex-j-c" @click="onSearch">搜索</div>
    </div>

    <div class="sell-tabs">
      <van-tabs :active="status" @change="onTabChange" custom-class="tabs-bg" line-width="60rpx" title-inactive-color="#222222" title-active-color="#FF3A00">
        <block v-for="(item, index) in tabs" :key="index">
          <van-tab :title="item.name" :name="item.status"></van-tab>
        </block>
      </van-tabs>
    </div>
    <div class="sell-orderList" v-if="orderList.length > 0">
      <block v-for="(item, index) in orderList" :key="index">
        <sell-orderItem :sellItem="item" :sellType="2">
          <div class="sell-info">
            <span class="">{{ item.member && item.member.name }} ({{ item.member && item.member.mobile }})</span>
          </div>
        </sell-orderItem>
      </block>
    </div>
    <van-empty description="空空如也" v-else />
  </div>
</template>
<script>
import sellDetail_controller from "./sellDetail_controller.js";
export default sellDetail_controller;
</script>
<style scoped>
.sell-page ::v-deep .van-search {
  padding: 0;
  border: 0.0313rem solid #dadada;
}
</style>
<style lang="scss" scoped>
/* packageF/consumption/orderDetails/orderDetails.wxss */
.sell-page {
  margin: 0.625rem 0.625rem 0 0.625rem;

  .search-padding {
    padding: 0;
    border: 0.0313rem solid #dadada;
  }
}

.search-sell {
  .van-search__content {
    background-color: #fff;
  }

  padding: 0.8125rem 0.8125rem 0.875rem 0.8125rem;
  background-color: #fff;

  .search-sn {
    width: 8.125rem;
    margin-right: 0.625rem;
  }

  .search-name {
    width: 8.125rem;
    margin-right: 0.5625rem;
  }

  .search-btn {
    width: 3.125rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.75rem;
    color: #fff;
    border-radius: 0.3125rem;
  }
}

.sell-page {
  .tabs-bg,
  .van-tabs__scroll {
    background-color: transparent;
  }
}

.sell-orderList {
  margin-top: 0.75rem;
}

.order-item .sell-info {
  padding: 0.9375rem 0 0.9375rem 0;
  position: relative;
  font-size: 0.75rem;
  color: #666;
  text-align: left;
}

.sell-info::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2rpx;
  border-top: 2rpx solid #e9e9e9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>
